<template>
	<view class="code-btn-wrapper">
		<button :class="['code-btn', codeBtnStyle]" v-if="sendMsgState == 0" @click="checkPhone" disabled>重新获取({{countDown}}s)</button>
		<button :class="['code-btn', codeBtnStyle]" v-else-if="sendMsgState == 3" @click="checkPhone" disabled>发送中</button>
		<button :class="['code-btn', codeBtnStyle]" v-else @click="checkPhone">{{sendMsgState == 1?'获取验证码':'重新获取'}}</button>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement">
		</slider-verify>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "send-code",
		props: {
			mobile: {
				type: String,
				default: ''
			},
			codeBtnStyle: {
				type: String,
				default: 'white', // transparent，透明
			},
			smsType: {
				type: Number,
				default: 2,
			}
		},
		data() {
			return {
				interval: null,
				disabled: false,
				sliderVerifyFLag: false, //滑块验证
				countDown: 60,
				sendMsgState: 1 //0 倒计时，1 可发送验证码，  2 可重新发送验证码， 3 验证码发送中
			};
		},
		methods: {
			checkPhone() {
				this.$emit('checkphone');
			},
      // 发送验证码前校验手机号
			checkPhoneOk() {
				let validPhones = this.getLimitSendPhone();
				let phoneExpTime = validPhones[this.mobile]

				// 该手机号60s内已发送过验证码，不用图形校验直接告知用户等待
				if (phoneExpTime) {
					app.showToast('该手机号60s内已发送过验证码，请稍后再试！');
					this.sendMsgState = 0;
					//等待时间倒计时展示
					let countTime = Math.ceil((phoneExpTime - new Date().getTime()) / 1000);
					this.setCountDown(countTime);
					return;
				}

				// 该手机号60s内没发过验证码，打开图形验证码
				this.sliderVerifyFLag = true;
			},
			// 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false;

				if (res) { //校验通过
					this.sendVerifyCode();
				} else {
					// 校验失败,点击关闭按钮
				}
			},
			// 发送短信验证码
			sendVerifyCode() {
				if (this.disabled) {
					return;
				}
				this.disabled = true;
				this.sendMsgState = 3;
				let params = {
					type: this.smsType,
					phone: this.mobile,
				}

				app._post_form('smscaptcha/send', params, res => { // success
					this.sendMsgState = 0;
					this.setCountDown();

					//存本手机号码过期时间60s，防止60s内重发
					this.setLimitSendPhone(this.mobile);

					app.showToast(res.msg);
				}, () => { // fail
					if (this.sendMsgState == 3) {
						this.sendMsgState = 2;
					}
				}, () => { //complete
					uni.hideLoading();
					this.disabled = false;
				});
			},
			setCountDown(time) {
				this.countDown = time || this.countDown;
				this.interval = setInterval(() => {
					if (this.countDown == 0) {
						clearInterval(this.interval);
						this.countDown = 60;
						this.sendMsgState = 2;
						return;
					}
					this.countDown -= 1;
				}, 1000)
			},
	
			// 获取60s内本机已经发送过验证码的手机号
			getLimitSendPhone() {
				let smsPhone = uni.getStorageSync('smsPhone');
				let phoneObj = smsPhone ? JSON.parse(smsPhone) : {};
				let validPhones = {};

				// 筛选出60s内发送过的手机号
				for (var phone in phoneObj) {
					let expTime = phoneObj[phone];
					if (expTime > (new Date().getTime())) {
						validPhones[phone] = expTime;
					}
				}
				// 有效手机数据重新存储
				uni.setStorageSync('smsPhone', JSON.stringify(validPhones));
				return validPhones;
			},
			// 本地存储手机号60秒过期时间
			setLimitSendPhone(phone) {
				let validPhones = this.getLimitSendPhone();
				validPhones[phone] = new Date().getTime() + 60 * 1000;
				uni.setStorageSync('smsPhone', JSON.stringify(validPhones));
			},
		}

	}
</script>

<style lang="scss">
	.code-btn-wrapper {
		flex-shrink: 0;
	}
	.code-btn {
		padding: 0 22rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: $uni-text-color;
	}
	.code-btn.white {
		background: #fff;
	}
	.code-btn.transparent {
		background: transparent;
	}

	.code-btn[disabled] {
		color: $uni-text-color-grey;
		background: none !important;
	}
</style>
